<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>表单 - 页面元素</title>
	<link rel="stylesheet" href="../libs/layui/layui-2.9.14/dist/css/layui.css">
	<script src="../libs/layui/layui-2.9.14/dist/layui.js"></script>

</head>

<body style="margin: 100px;">

	<form class="layui-form" action="">
<!-- 下述是基本的行区块结构，它提供了响应式的支持。但如果你不大喜欢，你可以换成你的结构，但必须要在外层容器中定义class="layui-form"，form模块才能正常工作。 -->
		<div class="layui-form-item">
			<label class="layui-form-label">标签区域</label>
			<div class="layui-input-block">
				原始表单元素区域
				<!-- 输入框 -->
				<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">  
			
			</div>
					
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">标签区域</label>
			<div class="layui-input-block">
				原始表单元素区域
				<!-- 下拉选择框 -->
				<select name="city" lay-verify="">
					<option value="">请选择一个城市</option>
					<option value="010">北京</option>
					<option value="021">上海</option>
					<option value="0571">杭州</option>
				</select>  
			</div>
					
		</div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<select name="city" lay-verify="">
					<option value="010">北京</option>
					<option value="021" disabled>上海（禁用效果）</option>
					<option value="0571" selected>杭州</option>
				  </select>  
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<select name="quiz">
					<option value="">请选择</option>
					<optgroup label="城市记忆">
					  <option value="你工作的第一个城市">你工作的第一个城市？</option>
					</optgroup>
					<optgroup label="学生时代">
					  <option value="你的工号">你的工号？</option>
					  <option value="你最喜欢的老师">你最喜欢的老师？</option>
					</optgroup>
				  </select>
			</div>
		</div>
		<div class="layui-form-item">
 
			<div class="layui-inline">
			  <label class="layui-form-label">范围</label>
			  <div class="layui-input-inline" style="width: 100px;">
				<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
			  </div>
			  <div class="layui-form-mid">-</div>
			  <div class="layui-input-inline" style="width: 100px;">
				<input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
			  </div>
			</div>
			
			<div class="layui-inline">
			  <label class="layui-form-label">密码</label>
			  <div class="layui-input-inline" style="width: 100px;">
				<input type="password" name="" autocomplete="off" class="layui-input">
			  </div>
			</div>
			
		  </div>
		  <div class="layui-form-item" pane>
			<label class="layui-form-label">单选框</label>
			<div class="layui-input-block">
			  <input type="radio" name="sex" value="男" title="男">
			  <input type="radio" name="sex" value="女" title="女" checked>
			</div>
		

	</form>
	
	<script>
		//Demo
		// layui.use('form', function(){
		//   var form = layui.form;
		  
		//   //监听提交
		//   form.on('submit(formDemo)', function(data){
		// 	layer.msg(JSON.stringify(data.field));
		// 	return false;
		//   });
		// });
		</script>

</body>

</html>